<template>
	<view v-if="data">
		<!-- ulist列表 -->
		<uni-list>
			<!-- <uni-list-item
				clickable
				v-for="(item, index) in data.data"
				:key="index"
			> -->
			<!-- 跳转传参 到商品详情页 -->
			<uni-list-item
				:to="`../goods-detail/goods-detail?lid=${item.lid}`"
				clickable
				v-for="(item, index) in data.data"
				:key="index"
			>
				<!-- 自定义插槽  slot=""-->
				<template slot="body">
					<view class="cell">
						<image :src="baseURL + item.pic" mode=""></image>
						<view>
							<view>{{ item.title }}</view>
							<view>¥{{ item.price }}</view>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="status"></uni-load-more>
		<!-- 使用App.vue中的公共css -->
		<view
			v-show="showGoTop"
			class="btn-gotop"
			hover-class="active"
			@click="doGoTop"
		>
			<uni-icons color="white" size="20" type="arrowthinup"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			url: 'http://www.codeboy.com:9999/data/product/list.php?',
			data: null,
			baseURL: 'http://www.codeboy.com:9999/',
			//加载状态
			status: 'more',
			// 回到顶部显示状态
			showGoTop: false
		};
	},
	mounted() {
		this.getData();
	},
	// 触底事件
	onReachBottom() {
		// 解构获取参数
		const { data, pageCount, pno } = this.data;
		// 如果正在加载，就不再发送请求
		if (this.status == 'loading') return;
		// 当前页和总页数相等 没有翻页数据 退出
		if (pageCount == pno) {
			this.status = 'noMore';
			return;
		}
		// 加载中
		this.status = 'loading';
		uni.request({
			url: this.url,
			method: 'GET',
			data: { pno: pno + 1 },
			success: res => {
				console.log(res);
				// 合并数据
				
				// 方法一 es6合并数组
				res.data.data = [...data, ...res.data.data];
				
				// 方法二 concat语法
				// res.data.data = data.concat(res.data.data);
				
				// 方法三 遍历追加元素
				// res.data.data.forEach((item, index) => {
					// data.push(item);
				// });
				// res.data.data = data;
				// 方法四 push(...res.data.data)
				// data.push(...res.data.data)
				// res.data.data = data;
				this.data = res.data;
				this.status = 'noMore';
			},
			fail: () => {},
			complete: () => {}
		});
	},
	// 监听滚动事件
	onPageScroll(e) {
		this.showGoTop = e.scrollTop > 2000;
	},
	methods: {
		// 回到顶部
		doGoTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 250
			});
		},
		// 获取数据
		getData() {
			uni.request({
				url: this.url,
				method: 'GET',
				data: { pno: 1 },
				success: res => {
					// console.log(res);
					this.data = res.data;
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.cell {
	// 通过父元素  修复子元素边距
	margin: -10px -13px;
	display: flex;
	// border: 1px solid purple;
	> image {
		width: 200rpx;
		height: 200rpx;
		flex: none;
	}
	> view {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		> view:first-child {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		> view:last-child {
			color: red;
			font-size: 1.1em;
		}
	}
}
</style>
